<template>
	<a-modal :title="title" :width="500" :destroyOnClose="true" :maskClosable="false" :visible="visible" @cancel="handleCancel">
		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">

			<!-- 字典代码 -->
			<a-form-model-item label="字典代码" prop="code" ref="code">
				<a-input :placeholder="placeholder.code" v-model="form.code" :disabled="disabledCode" />
			</a-form-model-item>

			<!-- 字典名称 -->
			<a-form-model-item label="字典名称" prop="name" ref="name">
				<a-input :placeholder="placeholder.name" v-model="form.name" />
			</a-form-model-item>
			<!-- 字典描述 -->
			<a-form-model-item label="字典描述" prop="description" ref="description">
				<a-input v-model.number="form.description" :placeholder="placeholder.description" />
			</a-form-model-item>


		</a-form-model>
		<!-- Modal 页脚 -->
		<template slot="footer">
			<a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
		</template>
	</a-modal>
</template>
<script>
	import {dictionaryAdd,dictionaryUpdate} from '../public/http.js';
	export default {
		props: ['editRecord'],
		data() {
			return {
				isUpdate: false, //是否是更新模式
				title: '新增字典',
				loading: false, //按钮Loading
				visible: true, //modal 显示状态
				disabledCode: false,
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 20
				},
				placeholder: {
					code: '请设置字典代码 EG:order_status',
					name: '请设置字典名称 EG:订单状态',
					description: '请设置字典描述 EG:订单的状态代码'
				},
				form: {
					code: '',
					name: '',
					description: ''
				},
				rules: {
					code: [{
						required: true,
						message: '请设置字典代码',
						trigger: 'blur'
					}, {
						pattern: /^[a-zA-Z0-9_]+$/,
						message: '字典代码值允许设置数字、字母、和下划线',
						trigger: 'blur'
					}],
					name: {
						required: true,
						message: '请设置一个字典名称',
						trigger: 'blur'
					},
					description: {
						required: true,
						message: '请为设置一个字典描述',
						trigger: 'blur'
					}
				}
			};
		},
		methods: {
			//表单提交事件
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					//验证成功后进行数据提交
					if (valid) {
						if (this.isUpdate) {

							//更新模式执行的方法
							dictionaryUpdate(this.editRecord.id,this.form).then(res =>{
							//删除字典缓存
							this.$store.commit('delDict',this.form.code);
							//消息提醒
							this.xhrMsg(res);
							}
							);
						} else {
							//新增模式执行的方法
							dictionaryAdd(this.form).then(res => this.xhrMsg(res));
						}
					}
				});
			},
			//新增和删除返回相同的消息构造
			xhrMsg(res) {
				if (res.code === 0) {
					//成功提醒
					this.$notification.success({
						message: '操作成功',
						description: res.message,
					});
					this.visible = false;
					this.$emit('closeFun', {
						render: true
					});
				} else {
					//错误提醒
					this.$notification.warning({
						message: '操作失败',
						description: res.message,
					});
				}
				this.loading = false;
			},
			//关闭弹窗
			handleCancel() {
				this.visible = false;
				this.$emit('closeFun', {
					render: false
				});
			},


			//表单初始化
			fromVal() {
				let obj = {...this.editRecord};
			 	if (obj.id) {
					this.form = {...obj};
					this.isUpdate=true;
					this.disabledCode = true; //代码项禁止修改
					this.title = `编辑字典 ${obj.name} (${obj.code}) `;
				}
			},
			//数据初始化
			async init() {
				this.fromVal();
			}

		},
		created() {
			this.init();
		}
	};
</script>
